<template>
  <div class="banner-container" @mouseenter="autoStop()" @mouseleave="autoMove()">
      <ul class="images" :style="{
          width:banners.length * 100 + '%',
          marginLeft: -index * 100 + '%'
      }">
          <li v-for="(item,i) in banners" :key="i">
              <a :href="item.link">
                  <img :src="item.url" alt="">
              </a>
          </li>
      </ul>
      <ul class="dots">
          <li v-for="(item,i) in banners" 
          :key="i" 
          :class="{
            active:index === i
          }"
          @click="index=i"></li>
      </ul>
  </div>
</template>

<script>
// 思考：
// 要做成组件，需要哪些数据 图片 换图片的时间 当前是第几张图片
// 组件是需要提供给别人使用的，图片是不是应该使用这传过来
// 图片数据和换图片的时间需要使用这传递过来，当前是第几张图片需要自己手动控制
export default {
    props:{
       banners:{
           type:Array,
           required:true
       },
       duration:{
           type:Number,
        //    required:true,
           default:1000
       }
    },
    data() {
        return {
            index:0,
            timer:null
        }
    },
    methods: {
        autoMove(){
            //判断如果this.timer有值，证明已经存在定时器了，不需要再多加一个定时器
            if(this.timer){
                return;
            }
            this.timer = setInterval(()=>{
                //为了让index的值在0-1(是图片的数量决定的)之间变换
                 this.index = (this.index + 1) % this.banners.length;
            },this.duration)
        },
        autoStop(){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    created() {
        console.log("界面创建")
        this.autoMove();
    },
    mounted() {
        console.log("界面加载了")
    },
    updated() {
        console.log("界面重新加载了") 
    },
    destroyed() {
        console.log("界面销毁了")
        this.autoStop();
    },

}
</script>

<style scoped>
.banner-container {
  height: 340px;
  position: relative;
  overflow: hidden;
  width: 1020px;
}
.banner-container li {
  display: block;
  width: 1020px;
  height: 100%;
  float: left;
}
.images {
  height: 100%;
  transition: 0.5s;
}
.banner-container img{
    width: 1080px;
    height: 100%;
}
.dots {
  position: absolute;
  bottom: 10px;
  width:80px;
  left: 500px;
}
.dots li {
  width: 10px;
  cursor: pointer;
  height: 10px;
  margin: 0 3px;
  border-radius: 50%;
  border: 1px solid;
  color: rgb(156, 78, 78);
}
.dots li.active {
  background: rgb(22, 21, 21);
}
</style>